<template>
	<view class="">
		

		<view class="headimg">
			<button class="headimgimg" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="headimgimg" :src="mineinfo.headImg"></image>
			</button>
		</view>
		<view class="box">
			<view class="flexr sex-box justify-between"> 
				<view class="sex-item flexr justify-between " :class="mineinfo.gender==0?'sexIsActive2':''" @click="choseOne(0)">
					<view class="sex-Icon sex2 flexc justify-center">
						<image src="../../static/images/new/b.png" mode=""></image>
					</view>
					女
				</view>
				<view class="sex-item flexr justify-between " :class="mineinfo.gender==1?'sexIsActive1':''" @click="choseOne(1)">
					<view class="sex-Icon sex1 flexc justify-center">
						<image src="../../static/images/new/b.png" mode=""></image>
					</view>
					男
				</view>
			</view>
			<view class="boxli flexr ">
				<text class="Required-name">昵称</text>
				<input v-model="mineinfo.nickName" type="nickname" @change="getNickname" placeholder="请输入姓名" />
			</view>
			<view class="boxli flexr ">
				<text>真实姓名</text>
				<input v-model="mineinfo.fullName"   placeholder="请输入真实姓名" />
			</view>
			<view class="boxli flexr boxjiantou1" @click="gotoPage(1)">
				<text class="Required-name">封面</text>
				<view style="margin-right: 50rpx;" @click.stop="lookImg(mineinfo.cover)">{{mineinfo.cover?'预览':'上传'}}</view>
			</view>
			<view class="boxli flexr boxjiantou1" @click="gotoPage('/packagePages/mine/sign?content='+mineinfo.sign)">
				<text class="Required-name">签名</text>
				<input v-model="mineinfo.sign"   placeholder="请输入签名" />
			</view>
			<view class="boxli   ">
				<picker mode="selector" :value="index" :range="cityList" range-key="name"  @change="cityChange">
					<view class="uni-input flexr boxjiantou2 "
						style="padding-right: 40rpx;width: 100%;justify-content:space-between;height: 80rpx;"><text class="Required-name">城市</text>
						<text>{{ mineinfo.cityName }}</text> </view>
				</picker>
				<!-- <text>城市</text>
				<input type="number" placeholder="输入城市" v-model="mineinfo.cityName" /> -->
			</view>
			<view class="boxli   flexr boxjiantou1" @click="gotoPage(2)">
				<text>擅长游戏</text>
				<view  class="elone gamesTag">
					<span v-for="item in tagsList" style="margin-left: 10rpx;">{{item.tagName||''}}</span>
				</view>
				<!-- <input type="number" placeholder="输入学历" v-model="mineinfo.education" /> -->
			</view>
			<view class="boxli   ">
				<picker mode="date" :value="date" start="1900-01-01" :end="endDate" @change="bindDateChange">
					<view class="uni-input flexr boxjiantou2 "
						style="padding-right: 40rpx;width: 100%;justify-content:space-between;height: 80rpx;"><text class="Required-name">出生日期</text>
						<text>{{ date }}</text> </view>
				</picker>
			</view>
			<view class="boxli  flexr ">
				<text>爱好</text>
				<input  placeholder="输入爱好" v-model="mineinfo.hobby" />
			</view>
			<view class="boxli  flexr ">
				<text class="Required-name">电话</text>
				<input type="number" placeholder="输入联系方式" v-model="mineinfo.phone" />
			</view>
			<!-- <view class="boxli  flexr ">
				<text>微信</text>
				<input type="number" placeholder="输入联系方式" v-model="mineinfo.wechat" />
			</view> -->
			<view class="boxli  flexr ">
				<text>是否公开联系方式</text>
					<switch :checked="mineinfo.isPublic"  @change="switch1Change" style="transform:scale(0.7)"/>
			</view>
			<!-- v-if="mineinfo.isAudit!=1" -->
			<view v-if="mineinfo.isAudit!=1"  class="boxli  picture-one" style="height: auto;">
				<text class="Required-name">个人相册</text>
				<view class="picture-card">
					<view class="picture-tips">
						请至少上传三张
					</view>
					<view class="picture-box">
						<mutilImgUpload width="166" :val="imgUrl" v-model="albumPicsList" ></mutilImgUpload>
					</view>
					
				</view>
			</view>
			<view class="bottombtn bottom-change-view"  @click="createInfo()">
			完成
			</view>
		</view>
	</view>
</template>

<script>
import {mutilImgUpload} from "@/components/imgUpload/mutilImgUpload"
import { isLogin, toLogin,formatDate, successToShow, errorToShow, verifyPhoneNumber } from '@/config/common.js';
import {
		baseUrl
	} from '@/config/config.js'
	import {getUserByToken } from '@/constant/customer.js';
	import {uploadFriendsInfo,getMakeFriendsInfo,getCity} from "@/constant/friend.js"
	export default {
		components:{
			mutilImgUpload
		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				memberInfo: {
					headImg: 'https://y.i2u.cn/etoyoFile/mine/mineheader.png'
				},
				hasLogin: false,
				date: null,
				sex: ["男", '女'],
				sexindex: 0,
				work: {},
				params: {
					height: null,
					weight: null,
					birth: "",
					name: "",
					sex: ""
				},
				mineinfo: {
					headImg:'',
					nickName:'',
					gender:null,
					fullName:'',
					phone:'',
					birthday:'',
					gender:0,
					sign:'',
					tags:[]
				},
				equipmentNum: null,
				customerToken: uni.getStorageSync('userToken'),
				cityList:[{id:1,cityName:'武汉'}],
				index:0,
				tagsList:[],
				imgUrl:[],
				albumPicsList:[]
			};
		},
		onLoad(opt) {
			this.getInfo()
			this.getAllCity()
		
		},

		onShow() {
			if(this.tagsList&&this.tagsList.length>0){
				this.mineinfo.tags=this.tagsList.map(item=>item.tagId)
			}
			this.$forceUpdate()
				console.log(this.mineinfo.tags)
		},
		computed: {
			
			show() {

				if (this.sexindex >= 0 && this.mineinfo.mobile && this.mineinfo.height && this.mineinfo.weight && this.mineinfo.workTypeName && this.date) {
					return true
				} else {
					return false
				}
			},
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			gotoPage(url){
				if(url==1){
					let cover=this.mineinfo.cover||''
					url='/packagePages/mine/cover?cover='+cover
				}
				if(url==2){
					let tags=this.tagsList||[]
					url='/packagePages/playercenter/regist/choosetag/index?serveTagList='+JSON.stringify(tags)
				}
				
			uni.navigateTo({
				url:url
			})	
			},
			lookImg(url){
				uni.previewImage({
					urls:[url],
					current: url
				})
			},
			getInfo(){
				let info=uni.getStorageSync('customerInfo')
				let id=info.id
				getMakeFriendsInfo(id).then(res=>{
					
					this.mineinfo=res.data
					this.date = this.mineinfo.birthday
					this.tagsList=this.mineinfo.servePlayerTags
				})
			},
			getAllCity(){
				getCity().then(res=>{
					this.cityList=res.data
				})
			},
	
			switch1Change(e){
				this.mineinfo.isPublic=e.detail.value?1:0
				 console.log('switch1 发生 change 事件，携带值为', e.detail.value)
			},
			choseOne(item){
				this.mineinfo.gender=item
				console.log(item,'-----')
			},
			register() {
				
				
				let params = {
					avatarPic: this.mineinfo.avatarPic,
					nickName: this.params.name,
					sex: this.params.sex,
					openId: uni.getStorageSync('openid'),
					equipmentNum:this.equipmentNum?this.equipmentNum:null
				}
				let that = this
				memberRegister(params).then(resp => {
					if (resp.code !== 200) return;
					that.hasLogin = true;
					uni.setStorageSync('hasLogin', that.hasLogin);
					let token = resp.data.tokenHead + ' ' + resp.data.token;
					uni.setStorageSync('token', token);
					uni.setStorageSync('storeTime', new Date().getTime());
					uni.setStorageSync("memberId",resp.data.memberId)
					this.setInfo(resp.data.memberId)
					
					
					
					// that.getMemberDetails();
				});
			},
			getNickname: function(e) {
				if (e) {
					this.mineinfo.nickName = e.detail.value
				}
				console.log(e.detail.value)
			},
			onChooseAvatar(e) {
				let that=this
				if (e) {
					const {
						avatarUrl
					} = e.detail
					
					uni.uploadFile({
						url: baseUrl + '/common/upload', //仅为示例，非真实的接口地址
						filePath: avatarUrl,
						name: 'file',
						formData: {},
						// header: {
						// 	Authorization: that.tui.getToken() || ''
						// },
						success: (uploadFileRes) => {
							let data = JSON.parse(uploadFileRes.data)
							if (data.code !== 0) return
							let result = data.url
							let fileUrl = result
							console.log(fileUrl,'fileUrl')
							that.mineinfo.headImg = fileUrl
						}
					})
					
					
				}

			},
			createInfo() {
				let params={
				...this.mineinfo,
				birthday:this.date,
				}
				if(this.mineinfo.isAudit!=1){
						let mediaUrls=[]
					if(this.albumPicsList&&this.albumPicsList.length>=3){
						mediaUrls=this.albumPicsList
					}else{
						errorToShow('请上传至少三张图片');
						return;
					}
					let makeFriendsMedia={
						mediaUrls:mediaUrls
					}
					params.makeFriendsMedia=makeFriendsMedia
				}
				if (!params.headImg) {
					errorToShow('请上传头像');
					return;
				}
				if (!params.nickName) {
					errorToShow('请填写昵称');
					return;
				}
				if (!params.phone) {
					errorToShow('请填写电话号码');
					return;
				}
				if (!verifyPhoneNumber(params.phone)) {
					errorToShow('电话号码格式不正确');
					return;
				}
				
				if(!params.cover){
					errorToShow('请上传封面');
					return;
				}
				if(!params.sign){
					errorToShow('请输入签名');
					return;
				}
				if(!params.cityId){
					errorToShow('请选择城市');
					return;
				}
				
				this.setInfo(params)

			},
			
			
			setInfo(params) {
				// console.log(id,'id')
				// if(id){
				// 	this.params.id=id
				// }
				uploadFriendsInfo(params).then(resp => {
					if (resp.code == 0){
						successToShow(resp.msg, res => {
							setTimeout(() => {
								uni.switchTab({
									url:'/pages/mine/index'
								})
							}, 500)
						});
					}else{
						errorToShow(resp.msg?resp.msg:'接口错误')
					}
				})
			},
			cityChange(e){
			
				this.index=e.target.value
				this.mineinfo.cityId=this.cityList[this.index].id
				this.mineinfo.cityName=this.cityList[this.index].name
				// this.date = this.mineinfo.birth = e.target.value;
			},
			bindDateChange: function(e) {
				this.date = this.mineinfo.birthday = e.target.value;
			},
			bindSexChange(e) {
				this.sexindex = e.target.value;
			},
			gotoworklist() {
				uni.navigateTo({
					url: "/pages/workList/workList"
				})
			},
		
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

		}
	};
</script>
<style>
@import url('@/css/common.css');
</style>
<style lang="scss">
	.toptips {
		justify-content: center;
		width: 100%;
		height: 80rpx;
		line-height: 34rpx;
		box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.02);
		font-size: 24rpx;
		color: #f68f00;
		background-color: #fff;
		padding: 0 20rpx;
	}

	.headimg {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
		margin: 40rpx auto 50rpx;

		.headimgimg {
			width: 200rpx;
			height: 200rpx;
			border-radius: 50%;
			padding: 0 !important;
		}

	}

	.box {
		width: 100%;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.boxjiantou {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			top: 40rpx;
			right: 20rpx;
			width: 20rpx;
			height: 20rpx;
			border-top: 2px solid #cccccc;
			border-right: 2px solid #cccccc;
			transform: rotate(45deg);
		}
	}

	.boxjiantou2 {
		position: relative;
		padding-right: 60rpx;

		&::after {
			content: '';
			position: absolute;
			top: 30rpx;
			right: 50rpx;
			width: 20rpx;
			height: 20rpx;
			border-top: 2px solid #cccccc;
			border-right: 2px solid #cccccc;
			transform: rotate(45deg);
		}
	}
	.boxjiantou1 {
		position: relative;
		padding-right: 60rpx;
	
		&::after {
			content: '';
			position: absolute;
			top: 30rpx;
			right: 30rpx;
			width: 20rpx;
			height: 20rpx;
			border-top: 2px solid #cccccc;
			border-right: 2px solid #cccccc;
			transform: rotate(45deg);
		}
	}

	.boxli {
		// width: 100%;
		padding: 0rpx 20rpx;
		justify-content: space-between;
		border-radius: 25px;
		background: #F6F6F6;
		height:80rpx;
		margin-top: 20px;
		box-sizing: border-box;
		text {
			line-height: 60rpx;
			display: inline-block;
			height: 60rpx;
			font-size: 32rpx;
			color: #212121;
		}

		input {
			width: 60%;
			font-size: 28rpx;
			text-align: right;
			margin-right: 40rpx;
			line-height: 60rpx;
			height: 60rpx;
		}
	}

	.bottombtn {
		margin: 60rpx auto;
		width: 90%;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		// color: $uni-text-color-inverse;
		// font-size: $uni-font-size-lg - 2rpx;
		// background-color: $theme-color;
		border-radius: 25px;
		// background: linear-gradient(270deg, #783CF9 0%, #FD83C8 100%);
		border-radius: 80rpx;
		color:#fff
	}
	
	.sex2{
		
	}
	
	
	.sex-box{
		.sex-item{
			width: 48%;
			height: 80rpx;
			border-radius: 25px;
			background: #F6F6F6;
			padding:0 5%;
			box-sizing: border-box;
		}
		.sex-Icon{
			width: 36rpx;
			height: 36rpx;
			border-radius: 50%;
			image{
				width: 28rpx;
				height: 28rpx;
			}
		}
		.sex2{
			background-color: #FD83C8;
		}
		.sex1{
			background-color: #783CF9;
		}
		
	}
	.sexIsActive1{
	
		background: linear-gradient(270deg, #783CF9 0%, #C1A4FF 100%)!important;
	}
	.sexIsActive2{
		background: linear-gradient(270deg, #FD83C8 0%, #f9c4e2 100%)!important;
	}
	.uni-input text{
		margin-right: 30rpx;
		
	}
	.picture-one{
		height: auto;
		padding:20rpx ;
	}
	.picture-card{
		margin-top: 20rpx;
	}
	.picture-tips{
		font-size: 12px;
		color: gray;
		line-height: 30rpx;
	}
	.picture-box{
		padding: 20rpx 0;
	}
	.gamesTag{
		width: 60%;
		text-align: right; 
		margin-right: 40rpx;
		
	}
	.Required-name::before{
		content: '*';
		color: red;
		margin-right: 6rpx;
	}
</style>